<template>
  <view class="container">
    <u-grid col="3" :border="true">
      <u-grid-item v-for="(item, index) in list" :key="index" @click="toView(item.key)">
        <i :class="['icon','iconfont', item.icon]" />
        <text class="u-line-1">{{item.text}}</text>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup>
const list = [
  {
    key: 0,
    text: 'test',
    icon: 'icon-test'
  },
  {
    key: 1,
    text: 'u-datetime-picker',
    icon: 'icon-date'
  },
  {
    key: 2,
    text: 'u-charts',
    icon: 'icon-line-chartshuju'
  },
  {
    key: 3,
    text: 'vue-baidu-map',
    icon: 'icon-MAP'
  },
  {
    key: 4,
    text: 'dataset',
    icon: 'icon-html'
  },
  {
    key: 5,
    text: 'pick-view',
    icon: 'icon-date1'
  },
  {
    key: 6,
    text: 'select-dom',
    icon: 'icon-html'
  },
  {
    key: 7,
    text: 'phone-call',
    icon: 'icon-call'
  },
  {
    key: 8,
    text: 'copy',
    icon: 'icon-copy'
  },
]
const toView = key => {
  switch (key) {
    case 0:
      uni.$u.route('/subPackage/a-test/index');
      break
    case 1:
      uni.$u.route('/subPackage/u-datetime-picker/index');
      break
    case 2:
      uni.$u.route('/subPackage/u-charts/index');
      break
    case 3:
      uni.$u.route('/subPackage/vue-baidu-map/index');
      break
    case 4:
      uni.$u.route('/subPackage/dataset/index');
      break
    case 5:
      uni.$u.route('/subPackage/pick-view/index');
      break
    case 6:
      uni.$u.route('/subPackage/select-dom/index');
      break
    case 7:
      uni.$u.route('/subPackage/phone-call/index');
      break
    case 8:
      uni.$u.route('/subPackage/copy/index');
      break
    default:
      break
  }
}
</script>

<style lang="scss">
.container{
  padding: 40rpx;
  .u-grid{
    .u-grid-item{
      padding: 20rpx 0;
      i{
        font-size: 64rpx;
        color: cornflowerblue;
        margin-bottom: 20rpx;
      }
      text{
        text-align: center;
      }
    }
  }
}
</style>
